$table-breakpoint: 767px;
$table-pagination-button-background-color: #295cbf; // Same as generic loop paginator - Was #17345b

/**
 * Column header
 */

.tangible-table-sortable-column-header {
  cursor: pointer;
  user-select: none;
}

/**
 * Fixed-width
 */

.tangible-table-container {
  margin-bottom: 1.25rem;

  &.loading .tangible-table {
    opacity: 0.3;
  }
}

.tangible-table-overflow {
  overflow: auto;
  max-width: 100%;
}

.tangible-table {
  table-layout: auto;
  margin: 0;

  transition: opacity 0.3s;

  td {
    vertical-align: middle;
  }

  // Prevent word break in table header and first column
  th,
  td:first-child {
    white-space: nowrap;
  }
}

/**
 * Pagination
 */

.tangible-table-pagination-container {
  display: flex;
  margin-top: 0.75rem;
}

.tangible-table-pagination-left-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0.75rem;
}

.tangible-table-pagination-right-column {
  flex: 1 0 auto;
  text-align: right;
}

@media (max-width: $table-breakpoint) {
  .tangible-table-pagination-container {
    display: block;
  }

  .tangible-table-pagination-left-column {
    display: none;
  }
  .tangible-table-pagination-right-column {
    text-align: left;
  }
}

/**
 * Button
 */

.tangible-table-button {
  padding: 0.25rem 0.75rem;
  border-radius: 0;

  &,
  &[disabled],
  &:hover,
  &:hover[disabled] {
    color: inherit;
    background-color: inherit;
    border: 1px solid #ddd;
  }

  &[disabled],
  &:hover[disabled] {
    color: #999;
  }

  &.active {
    color: #ffffff;
    background-color: $table-pagination-button-background-color;
    border-color: $table-pagination-button-background-color;
  }
}

.tangible-table-button-group {
  .tangible-table-button {
    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &:not(:last-child) {
      border-right: 0;
    }
  }
}

@media (max-width: $table-breakpoint) {
  .tangible-table-button {
    padding: 0.5rem 1rem;
  }
}

/**
 * Icons
 *
 * Thanks to https://yoksel.github.io/url-encoder/ for converting SVG to CSS
 */

.tangible-table-icon {
  width: 1em;
  height: 1em;
}

.tangible-table-checkmark-icon {
  /*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="#19a974" d="M933 316q0 22-16 38L513 758l-76 76q-16 15-38 15t-38-15l-76-76L83 556q-15-16-15-38t15-38l76-76q16-16 38-16t38 16l164 165 366-367q16-16 38-16t38 16l76 76q16 15 16 38z"/></svg>

*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='%2319a974' d='M933 316q0 22-16 38L513 758l-76 76q-16 15-38 15t-38-15l-76-76L83 556q-15-16-15-38t15-38l76-76q16-16 38-16t38 16l164 165 366-367q16-16 38-16t38 16l76 76q16 15 16 38z'/%3E%3C/svg%3E");
}

.tangible-table-cancel-icon {
  /*

<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>

*/
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e74c3c' d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z'/%3E%3C/svg%3E");
}
